<template>
    <el-dialog v-model="show" :title="titles" width="450px" append-to-body center :before-close="handleClose">
        <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form"
            v-if="loginTypes == 'account'">
            <el-form-item prop="username">
                <el-input v-model="loginForm.username" type="text" size="large" auto-complete="off" placeholder="请输入学号">
                    <template #prefix><img src="@/assets/学号@2x.png" class="input-icons" /></template>
                </el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input v-model="loginForm.password" type="password" size="large" auto-complete="off"
                    placeholder="请输入密码" @keyup.enter="handleLogin">
                    <template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>
                </el-input>
            </el-form-item>
            <el-form-item style="width: 100%">
                <el-button :loading="loading" size="large" type="primary" class="login-form-button"
                    @click.prevent="handleLogin">
                    <span v-if="!loading">{{ proxy.$t('login.login') }}</span>
                    <span v-else>{{ proxy.$t('login.logging') }}</span>
                </el-button>

            </el-form-item>
            <div class="phone">
                <img :src="iphone" alt="">
                <div @click="typeClick('mobile', '手机登录/快捷注册')">手机登录</div>
            </div>
        </el-form>

        <el-form ref="loginRefs" :model="loginForms" :rules="loginRules" class="login-form"
            v-if="loginTypes == 'mobile'">
            <el-form-item prop="phonenumber">
                <el-input v-model="loginForms.phonenumber" type="text" size="large" auto-complete="off"
                    placeholder="请输入手机号">
                    <template #prefix><img src="@/assets/手机 (3)@2x.png" class="input-iconss" /></template>
                </el-input>
            </el-form-item>
            <el-form-item prop="smsCode">
                <el-input v-model="loginForms.smsCode" size="large" auto-complete="off" placeholder="请输入验证码"
                    @keyup.enter="handleLogin">
                    <template #prefix><img src="@/assets/验证 验证码@2x.png" class="input-icons" /></template>
                    <template #append>
                        <el-button size="large" type="primary" @click="onGetCode" :disabled="countdown > 0">{{ countdown
                            > 0 ? `${countdown}秒后重新获取` : '获取验证码' }}</el-button>
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item style="width: 100%">
                <el-button :loading="loading" size="large" type="primary" class="login-form-button"
                    @click.prevent="handleLogins">
                    <span v-if="!loading">{{ proxy.$t('login.login') }}</span>
                    <span v-else>{{ proxy.$t('login.logging') }}</span>
                </el-button>

            </el-form-item>
            <div class="phone">
                <img :src="iphone" alt="">
                <div @click="typeClick('account', '学号登录')">学号登录</div>
            </div>
        </el-form>
    </el-dialog>
</template>

<script setup lang="ts">
import { getCodeImg, getTenantList } from '@/api/login';
import { useUserStore } from '@/store/modules/user';
import { LoginData, TenantVO } from '@/api/types';
import { getPhoneCode } from '@/api/index'
import { to } from 'await-to-js';
import { useI18n } from 'vue-i18n';
import iphone from '@/assets/手机 (3)@2x.png'
import debounce from 'lodash/debounce';

const props = defineProps({
    dialogInfoVisible: {
        type: Boolean,
        default: false
    },
    loginType: {
        type: String,
        default: 'account'
    },
    title: {
        type: String,
        default: '学号登录'
    }
});
const show = computed(() => props.dialogInfoVisible);
const emits = defineEmits(['doClose']);
const handleClose = () => {
    emits('doClose');
};

const loginTypes = ref()
const titles = ref()

watch(() => props.dialogInfoVisible, (val) => {
    loginTypes.value = props.loginType
    titles.value = props.title
});


const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const userStore = useUserStore();
const router = useRouter();
const { t } = useI18n();

const loginForm = ref<LoginData>({
    tenantId: '000000',
    username: '',
    password: '',
    rememberMe: false,
    code: '',
    uuid: ''
} as LoginData);

const loginForms = ref<any>({
    tenantId: '000000',
    type: 0,
    clientId: '428a8310cd461950ue699df5d894f886',
    grantType: 'sms',
    phonenumber: '',
    smsCode: '',
    code: '',
});

const loginRules: ElFormRules = {
    tenantId: [{ required: true, trigger: 'blur', message: t('login.rule.tenantId.required') }],
    username: [{ required: true, trigger: 'blur', message: '请输入学号' }],
    password: [{ required: true, trigger: 'blur', message: '请输入密码' }],
    code: [{ required: true, trigger: 'change', message: t('login.rule.code.required') }],
    phonenumber: [
        { required: true, message: '手机号不能为空', trigger: 'blur' },
        { pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: '请输入正确的手机号', trigger: 'blur' }
    ],
    smsCode: [{ required: true, trigger: 'blur', message: '请输入验证码' }],
};

const codeUrl = ref('');
const loading = ref(false);
// 验证码开关
const captchaEnabled = ref(true);
// 租户开关
const tenantEnabled = ref(true);

// 注册开关
const redirect = ref('/');
const loginRef = ref<ElFormInstance>();
const loginRefs = ref<ElFormInstance>();
// 租户列表
const tenantList = ref<TenantVO[]>([]);

watch(
    () => router.currentRoute.value,
    (newRoute: any) => {
        redirect.value = newRoute.query && newRoute.query.redirect && decodeURIComponent(newRoute.query.redirect);
    },
    { immediate: true }
);

/** 登录方式切换 */
const typeClick = (type: string, title: string) => {
    loginTypes.value = type
    titles.value = title
}
const countdown = ref(0)
const timer = ref(null)

const onGetCode = debounce(() => {
    getCodes()
}, 500)
const getCodes = () => {
    loginRefs.value?.validateField('phonenumber', (errorsRes) => {
        if (!errorsRes) {
            // 如果倒计时还在进行中或手机号不合法，则不执行获取验证码操作
            if (countdown.value > 0) {
                proxy?.$modal.msgError('验证码已发送，请勿重复点击');
                return
            }

        } else {
            getPhoneCode({
                phone: loginForms.value.phonenumber,
            }).then((res) => {
                // 假设后端返回成功后开始倒计时
                startCountdown();
            })
        }
    })
}

// 倒计时
const startCountdown = () => {
    countdown.value = 60; // 设置倒计时时间为60秒
    timer.value = setInterval(() => {
        if (countdown.value > 0) {
            countdown.value--;
        } else {
            clearInterval(timer.value);
            timer.value = null;
        }
    }, 1000);
}

const handleLogins = () => {
    loginRefs.value?.validate(async (valid: boolean, fields: any) => {
        if (valid) {
            loading.value = true;
            // 调用action的登录方法
            loginForms.value.code = loginForms.value.smsCode
            const [err] = await to(userStore.logins(loginForms.value));
            if (!err) {
                const redirectUrl = redirect.value || '/';
                await router.push(redirectUrl);
                loading.value = false;
                proxy.$modal.msgSuccess('登录成功');
                emits('doClose');
            } else {
                loading.value = false;
                // 重新获取验证码
                if (captchaEnabled.value) {
                    await getCode();
                }
            }
        }
    })
};

const handleLogin = () => {
    loginRef.value?.validate(async (valid: boolean, fields: any) => {
        if (valid) {
            loading.value = true;
            // 勾选了需要记住密码设置在 localStorage 中设置记住用户名和密码
            if (loginForm.value.rememberMe) {
                localStorage.setItem('tenantId', String(loginForm.value.tenantId));
                localStorage.setItem('username', String(loginForm.value.username));
                localStorage.setItem('password', String(loginForm.value.password));
                localStorage.setItem('rememberMe', String(loginForm.value.rememberMe));
            } else {
                // 否则移除
                localStorage.removeItem('tenantId');
                localStorage.removeItem('username');
                localStorage.removeItem('password');
                localStorage.removeItem('rememberMe');
            }
            // 调用action的登录方法
            const [err] = await to(userStore.login(loginForm.value));
            if (!err) {
                const redirectUrl = redirect.value || '/';
                await router.push(redirectUrl);
                loading.value = false;
                proxy.$modal.msgSuccess('登录成功');
                emits('doClose');
            } else {
                loading.value = false;
                // 重新获取验证码
                if (captchaEnabled.value) {
                    await getCode();
                }
            }
        } else {
            console.log('error submit!', fields);
        }
    });
};

/**
 * 获取验证码
 */
const getCode = async () => {
    const res = await getCodeImg();
    const { data } = res;
    captchaEnabled.value = data.captchaEnabled === undefined ? true : data.captchaEnabled;
    if (captchaEnabled.value) {
        codeUrl.value = 'data:image/gif;base64,' + data.img;
        loginForm.value.uuid = data.uuid;
    }
};

const getLoginData = () => {
    const tenantId = localStorage.getItem('tenantId');
    const username = localStorage.getItem('username');
    const password = localStorage.getItem('password');
    const rememberMe = localStorage.getItem('rememberMe');
    loginForm.value = {
        tenantId: tenantId === null ? String(loginForm.value.tenantId) : tenantId,
        username: username === null ? String(loginForm.value.username) : username,
        password: password === null ? String(loginForm.value.password) : String(password),
        rememberMe: rememberMe === null ? false : Boolean(rememberMe)
    } as LoginData;
};

/**
 * 获取租户列表
 */
const initTenantList = async () => {
    const { data } = await getTenantList(false);
    tenantEnabled.value = data.tenantEnabled === undefined ? true : data.tenantEnabled;
    if (tenantEnabled.value) {
        tenantList.value = data.voList;
        if (tenantList.value != null && tenantList.value.length !== 0) {
            loginForm.value.tenantId = tenantList.value[0].tenantId;
        }
    }
};

onMounted(() => {
    getCode();
    initTenantList();
    getLoginData();
});
</script>

<style lang="scss" scoped>
:deep(.el-input-group__append) {
    background-color: #0390D8;
    color: #fff;
}

.phone {
    display: flex;
    align-items: center;
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 14px;
    color: #858585;
    cursor: pointer;

    img {
        width: 12px;
        height: 17px;
        margin-right: 10px;
    }
}

.login-form-button {
    background-color: #0390D8 !important;
    margin-left: 50%;
    transform: translateX(-50%);
    width: 200px;
}

.login {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-image: url('../assets/images/login-background.jpg');
    background-size: cover;
}

.title-box {
    display: flex;

    .title {
        margin: 0px auto 30px auto;
        text-align: center;
        color: #707070;
    }

    :deep(.lang-select--style) {
        line-height: 0;
        color: #7483a3;
    }
}

.login-form {
    border-radius: 6px;
    background: #ffffff;
    width: 400px;
    padding: 25px 25px 5px 25px;

    .el-input {
        height: 40px;

        input {
            height: 40px;
        }
    }

    .input-icon {
        height: 39px;
        width: 14px;
        margin-left: 0px;
    }

    .input-icons {
        height: 14px;
        width: 14px;
        margin-left: 0px;
    }

    .input-iconss {
        height: 14px;
        width: 12px;
        margin-left: 0px;
    }
}

.login-tip {
    font-size: 13px;
    text-align: center;
    color: #bfbfbf;
}

.login-code {
    width: 33%;
    height: 40px;
    float: right;

    img {
        cursor: pointer;
        vertical-align: middle;
    }
}

.el-login-footer {
    height: 40px;
    line-height: 40px;
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    color: #fff;
    font-family: Arial, serif;
    font-size: 12px;
    letter-spacing: 1px;
}

.login-code-img {
    height: 40px;
    padding-left: 12px;
}
</style>
